<template>
  <div class="wrap">
    <div class="header">
      <div class="head-top">
        <div class="region">
          <svg class="index-3guVd">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#location"></use>
          </svg>
          <span>福田区中心区深圳市政府(福中三路北)</span>
          <svg class="index-9eIfV"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#arrow"></use></svg>
        </div>
        <div class="weather">
          <div>
            <span class="s1">{{weather.temperature}}°</span>
            <span class="s2">{{weather.description}}</span>
          </div>
          <img :src="`https://fuss10.elemecdn.com/${weather.image_hash}.png?imageMogr/format/webp/thumbnail/!69x69r/gravity/Center/crop/69x69/`" alt="">
        </div>
      </div>

      <div class="head-input">
        <input type="text" placeholder="搜索商家、商品">
      </div>
      <div class="head-bottom">
        <a href="#" :key="index" v-for="(item,index) in suggest">{{item.word}}</a>
      </div>
    </div>

    <div class="banner">
      <mt-swipe :auto="0">
        <mt-swipe-item>
           <router-link :to="{path:'/goodsdetails',query: {id: item.id,name:item.name}}"  :key="index" v-for="(item,index) in bannerList" v-if="index < 8"> 
            <div class="container">
              <img :src="`https://fuss10.elemecdn.com/${item.image_hash}.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/`" alt="">
            </div>
            <span>{{item.name}}</span>
           </router-link> 
        </mt-swipe-item>
        <mt-swipe-item>
           <router-link :to="{path:'/goodsdetails',query: {id: item.id,name:item.name}}"  :key="index" v-for="(item,index) in bannerList" v-if="index>=8">
           <div class="container">
              <img :src="`https://fuss10.elemecdn.com/${item.image_hash}.jpeg?imageMogr/format/webp/thumbnail/!90x90r/gravity/Center/crop/90x90/`" alt="">
            </div>
            <span>{{item.name}}</span>
          </router-link>
        </mt-swipe-item>
      </mt-swipe>
    </div>

    <div class="main">
      <h2 class="title" ref="title">推荐商家</h2>
      <ul class="business" v-infinite-scroll="loadMore" infinite-scroll-distance="0">
        <li :key="index" v-for="(item,index) in goodsList">
					<router-link :to="{path:'/shop',query: {id: item.id}}">
						<div class="img">
							<img :src="`https://fuss10.elemecdn.com/${item.image_path}.${item.image_path.substr(-3,3)=='png'?'png':'jpeg'}?imageMogr/format/webp/thumbnail/!120x120r/gravity/Center/crop/120x120/`" alt="">
						</div>
						<div class="content">
              <div>
                <h3><span v-if="item.is_premium">品牌</span>{{item.name}}</h3>
                <div class="sales-volume">
                  <div class="star">
                    <svg v-for="i in 5"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#rating-star"></use></svg>
                  </div>
                  <span>{{item.rating}}</span>
                  <p>月售{{item.recent_order_num}}</p>
                  <em v-if="item.delivery_mode">蜂鸟专送</em>
                </div>
                <div class="text">
                  <div class="send">
                    <span>￥{{parseInt(item.float_minimum_order_amount)}}起送</span>
                    <span>配送费￥{{parseInt(item.float_delivery_fee)}}</span>
                    <span>{{item.average_cost}}</span>
                  </div>
                  <div class="attach">
                    <span>{{item.distance}}</span>
                    <span>{{item.order_lead_time}}分钟</span>
                  </div>
              </div>
							
              <div class="activity">
                <dl class="act-list">
                  <dd v-show="index <= 1 || item.show" :key="index" v-for="(value,index) in item.activities">
                    <span>{{value.icon_name}}</span>
                    <em>{{value.description}}</em>
                  </dd>
                </dl>
                <div class="act-num" v-if="item.activities.length > 2"><span @click.prevent="handle(index)">{{item.activities.length}}个活动</span></div>
              </div>

							</div>
						</div>
					</router-link>
				</li>
      </ul>
    </div>

    <div class="foot">
      <div class="tab">
        <router-link to="/">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#index.18edf5a"></use></svg>
          <span class="on">外卖</span>
        </router-link>
        <router-link to="/find">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#discover-regular.8ef537f"></use></svg>
          <span>发现</span>
        </router-link>
        <router-link to="/order">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#order-regular.41c17f8"></use></svg>
          <span>订单</span>
        </router-link>
        <router-link to="/profile">
          <svg class="index-footerTabIcon_1EbB8wS"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#profile-regular.c151d62"></use></svg>
          <span>我的</span>
        </router-link>
      </div> 
    </div>

    <transition name="scroll">
      <a href="#" class="scrolltop" ref="scroll" v-if="isScroll">
        <svg class="BackTop-icon_2Js4K94"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#back-top.7a234e5"></use></svg>
      </a>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'hello',
  data () {
    return {
      weather:[],
      suggest:[],
      isImg:'',
      bannerList:null,
      goodsList:[],
      goodsLists:[],
      isScroll:false,
      page:0
    }
  },
  methods: {
    handle(index){
      this.$set(this.goodsList[index],'show',!this.goodsList[index].show)
    },
    loadMore() {
      this.$http.get('http://localhost:3000/indexList?page='+this.page).then(function(res){
        var data = res.data;
        this.goodsList = this.goodsList.concat(data)
      },function(error){
        console.log(error)
      })
      this.page+=20;
    },
  },
  mounted () {

    // 请求天气的信息
    this.$http.get('http://localhost:3000/weather').then(function(res){
      var data = res.data;
      console.log(data)
      if(data){
        this.weather = data
      }
    },function(error){
      console.log(error)
    })

    // 请求搜索列表的信息
    if(!sessionStorage.getItem('suggest')){
      this.$http.get('http://localhost:3000/suggest').then(function(res){
        console.log(res)
        var data = res.data;
        sessionStorage.setItem('suggest',JSON.stringify(data))
        var suggest = sessionStorage.getItem('suggest') 
        this.suggest = JSON.parse(suggest)

      },function(error){
        console.log(error)
      })
    }else{
      this.suggest = JSON.parse(sessionStorage.getItem('suggest'))
    }

    // 请求轮播图列表的信息
    if(!sessionStorage.getItem('banner')){
      this.$http.get('http://localhost:3000/banner').then(function(res){
        console.log(res)
        var data = res.data[0].entries;
        sessionStorage.setItem('banner',JSON.stringify(data))
        var banner = sessionStorage.getItem('banner') 
        this.bannerList = JSON.parse(banner)

      },function(error){
        console.log(error)
      })
    }else{
      this.bannerList = JSON.parse(sessionStorage.getItem('banner'))
    }

    // 请求商品图列表的信息
    if(!sessionStorage.getItem('goodsList')){
      this.$http.get('http://localhost:3000/indexList').then(function(res){
        var data = res.data;
        sessionStorage.setItem('goodsList',JSON.stringify(data))
        var goodsLists = sessionStorage.getItem('goodsList') 
        this.goodsList = JSON.parse(goodsLists)
        
      },function(error){
        console.log(error)
      })
    }else{
      this.goodsList = JSON.parse(sessionStorage.getItem('goodsList'))
    }

    let _this = this;
    window.onscroll = function(){
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
      if(scrollTop >= _this.$refs.title.offsetTop){
        _this.isScroll = true;
      }else{
        _this.isScroll = false;
      }
    }
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .wrap{width:100%;}
  .header{height:2.45rem; background-image: linear-gradient(90deg,#0af,#0085ff); color:#fff; padding: .2rem .28rem;}
  .head-top{display: flex; justify-content:space-between; line-height: .69rem;}
  .region{font-size: .35rem; width:60%; display: flex; align-items: center;}
  .region span{max-width:80%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; margin: 0 .1rem;}
  .weather{ display:flex;}
  .index-3guVd{ width:.26rem; height: .31rem;display: inline-block;}
  .index-9eIfV{width: .14rem; height: .07rem;}
  .weather img{width:.55rem;height:.55rem;margin-left:.1rem;}
  .weather span{ font-size: .28rem; display: block; line-height: 1.2; text-align:right;}
  .head-input input{ height: .7rem; margin: .15rem 0; border:none; width: 100%; border-radius: .3rem; text-align: center; box-shadow: 0 0.026667rem 0.066667rem 0 rgba(0,0,0,.2); font-size: .25rem; display: block; color:#000;}
  .head-bottom{ display: flex;-webkit-box-align: center; align-items: center; white-space: nowrap; overflow-x: auto;}
  .head-bottom a{margin-right: .3rem; font-size: .23rem; color:#fff; line-height: 1.2; display: inline-block;}

  .banner{height: 3.54rem;}
  .banner a{width: 25%; display: flex; justify-content: center; align-items: center; flex-direction:column; margin-top:.22rem; float: left;}
  .banner .container{ width:.9rem; height: .9rem;}
  .banner a span{line-height: .28rem;margin-top:.1rem;display: block; font-size: .22rem; color: #000;}
  .banner .container img{ width:100%; height: 100%;}

  .star{display: flex; align-items: center;}
  .star svg{height: .2rem; width: .2rem; fill: #ffaa0c;}


  .main .title{ font-size: .3rem; padding-left: .3rem; border-top: .2rem solid #eee; line-height: .7rem;}
  .business li{ border-top: 1px solid #eee;}
  .business li a{	display: flex;}
  .business .img{ padding: .3rem .2rem;}
  .business img{ width: 1.2rem; height: 1.2rem;}
  .business .content{ padding: .3rem .2rem .3rem 0; width: 100%; color: #666;}
  .business .content h3{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 3.5rem; font-size: .3rem; line-height: 1.2; color: #000;}
  .business .content h3 span{ font-size: .24rem; display: inline-block; background: #ffd930; height: .3rem; line-height: .3rem; color: #52250a; margin-right: .133333rem; padding: 0 .066667rem;}
  .business .sales-volume{ display: flex; font-size: .23rem; line-height: 1.2; margin-top: .15rem;}
  .business .sales-volume span{ color: #ff6000; margin: 0 .106667rem;}
  .business .sales-volume p{width:55%;}
  .business .sales-volume em{background: #2395ff; color: #fff; float: right; display: inline-block; padding: 0 .1rem; font-size: .2rem; line-height: 1.2; border-radius: .05rem;}
  .business .text{ display: flex; font-size: .23rem; margin-top: .17rem; line-height: 1.2; justify-content: space-between;}
  .business .send span:nth-child(2):before{ margin: 0 .08rem; color: #ddd; content: "/";}
  .business .send span:nth-child(3):before{ margin: 0 .08rem; color: #ddd; content: "/";}
  .business .attach span:first-child{ color: #999;}
  .business .attach span:last-child{ color: #2395ff;}
  .business .attach span:last-child:before{ margin: 0 .08rem; color: #ddd; content: "/";}
  .business .activity{margin-top: .15rem; border-top:1px solid #eee; position: relative;}
  .business .act-list dd{ font-size: .2rem; margin-top: .05rem;line-height: 1.3;}
  .business .act-list dd span{ display: inline-block; font-size: .17rem; color: #fff; background: rgb(240, 115, 115);width: .2rem; height: .2rem; margin: .1rem .1rem 0 0;}
  .business .act-list dd:first-child{width:80%;}
  .business .act-list dd:first-child span{background: rgb(112, 188, 70);}
  .business .act-num{position: absolute; right:0; top:0; height: 100%; padding: .2rem 0; font-size: .2rem;z-index: 10;}

  .scrolltop{background: #fff; border: 1px solid #ccc; width: .85rem; height: .85rem; border-radius:50%; position: fixed; right:.3rem; bottom: 1.5rem; z-index: 100;}
  .scrolltop svg{width: .4rem; height: .4rem; fill: #999; position: relative; top:-50%; left:50%; transform: translateX(-50%);}
  .scroll-enter-active {
  transition: all .6s;
  }
  .scroll-leave-active {
  transition: all .6s;
  }
  .scroll-enter, .scroll-leave-to{
  opacity: 0;
  }

  .foot{position: fixed; bottom:0; left: 0; width: 100%; border-top: 1px solid #ccc; background: #fff; z-index: 1000;}
  .tab{ display: flex; justify-content: space-between; height: 1rem; align-items:center; padding-top: .09rem;}
  .tab a{display: flex; font-size: .22rem; flex-direction: column; align-items: center; width: 25%; color: #666;}
  .tab a span{line-height: 1.4; display: block;}
  .tab svg{width: .4rem; height: .4rem; margin-bottom: .03rem;}
  .foot .on{color: #0089dc;}
</style>
